import {Button, Col, Input, Row, Select} from "antd";
import React from "react";
import {isEmpty} from "../../../../utils/collectionUtils";

const ColProps = {
  xs: 24,
  sm: 12,
  style: {
    marginBottom: 16,
  },
}

const TwoColProps = {
  ...ColProps,
  xl: 96,
}

const {Search} = Input
const InputGroup = Input.Group
const Option = Select.Option;



export function getHeader( columnDef, rowData, onSearch, onFieldSelect, buttons
  // dispatch, createAction, dispatchTypeForShowModal, gridOptions
){

  let getOptions = (columnDef) => {
    if (!columnDef) {
      return
    }

    return columnDef.map((column) => {
        return (<Option value={column.field}>{column.headerName}</Option>)
      }
    )
  }

  let onEnterPress = (e, sec)=>{
    onSearch(e.target.value, e)
  }


  let getButtons = (buttons)=>{

    let headerColumns = []
    if(isEmpty(buttons) ){
      return (headerColumns)
    }

    let spanForPlaceHolderColumn = 14 - buttons.length * 2
    headerColumns.push(<Col {...ColProps} xl={{ span: spanForPlaceHolderColumn }} md={{ span: spanForPlaceHolderColumn }}></Col>)
    buttons.forEach( (buttonConfig)=>{
      headerColumns.push( <Col {...ColProps} xl={{ span: 2 }} md={{ span: 2 }}>
          <Button type={buttonConfig.type ? buttonConfig.type : "primary"}  onClick={buttonConfig.clickHandler}>{buttonConfig.name}</Button>
        </Col>)
      })

    return(
      headerColumns
    )
  }


  return (
    <Row gutter={24}>
      <Col {...ColProps} xl={{ span: 10 }} md={{ span: 10 }}>
        <InputGroup compact>
          <Select style={{ width: '26%' }} placeholder="Choose Field" onSelect={onFieldSelect} >
            {
              getOptions(columnDef)
            }
          </Select>
          <Search style={{ width: '70%' }} onSearch={onSearch} onPressEnter={onEnterPress}></Search>
        </InputGroup>
      </Col>

      {
        getButtons(buttons)
      }

    </Row>
  )
}
